<template>
	<form @submit="formSubmit">
    <view class="register">
      <image class="register-bg" src="../../static/img/loginbg.png" />
      <scroll-view scroll-y class="register-inner">
        <image class="register-logo" src="../../static/img/logo.png">
          <view class="input-row">
            <input @input="onEnterPhone" placeholder-class="text-white" maxlength="11" name="userPhone" type="number" placeholder="请输入手机号" />
          </view>
          <view class="input-row">
            <input name="pwd" password="true" placeholder-class="text-white" placeholder="请输入密码" />
          </view>
          <view class="input-row">
            <input name="confirmPwd" password="true" placeholder-class="text-white" placeholder="请确认密码" />
          </view>
          <view class="input-row">
            <input type="number" name="verificationCode" placeholder-class="text-white" maxlength="6" placeholder="请输入验证码" />
            <button class="cu-btn primary round ag-ml20 text-sm" @click="onPhoneVerificationCode" v-if="showSMSCodeButton">获取验证码</button>
            <uni-countdown :show-colon="true" :show-day="false" :second="5" v-if="showCountdown" @timeup="onSmsTimeup"></uni-countdown>
          </view>
          <button class="cu-btn block primary round ag-mt60" form-type="submit">注册</button>
          <button @click="onCancel" class="cu-btn block cancel primary round ag-mt20">取消</button>
          <view class="ag-spacer20"></view>
      </scroll-view>
    </view>
	</form>
</template>
<script>
	import uniCountdown from '@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue'
	const graceChecker = require("../../common/graceChecker.js")
	export default {
		components: {
			uniCountdown
		},
		data() {
			return {
				userPhone: '',
				showCountdown: false,
				showSMSCodeButton: true,
			}
		},
		onLoad() {

		},
		methods: {
			onSmsTimeup() {
				this.showCountdown = false;
				this.showSMSCodeButton = !this.showCountdown;
			},
			onCancel() {
				uni.navigateBack();
			},
			onEnterPhone(e) {
				this.userPhone = e.detail.value;
			},
			formSubmit: function(e) {
				let formData = e.detail.value;
				var rule = [{
						name: "userPhone",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "手机不能为空"
					},
					{
						name: "userPhone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请填写正确手机号"
					},
					{
						name: "pwd",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "密码不能为空"
					},
					{
						name: "confirmPwd",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "确认密码不能为空"
					},
					{
						name: "confirmPwd",
						checkType: "same",
						checkRule: "",
						errorMsg: "确认密码与密码不一致"
					},
					{
						name: "verificationCode",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					},
				];
				rule[4].checkRule = formData.pwd;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.onRegister(formData.userPhone, formData.pwd, formData.verificationCode);
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			async onRegister(userPhone, userPwd, userVerificationCode) {
				var result = await this.registerService.registerAsync(userPhone, userPwd, userVerificationCode);
				if(result.RetBool==true){
					uni.navigateTo({
						url: "../login/index",
						success: () => {
							this.subdisabled = false;
						}
					})
				}else{
					uni.showToast({
						title: result.RetMsg,
						icon: "none"
					});
				}
				console.log(result);
			},
			async onPhoneVerificationCode() {
				this.showCountdown = true;
				this.showSMSCodeButton = !this.showCountdown;
				if (this.userPhone != '') {	
					let phoneRule=/^[1][3,4,5,7,8][0-9]{9}$/;
					if(phoneRule.test(this.userPhone)){
						console.log(this.userPhone);
						var result = await this.registerService.phoneVerificationCodeAsync(this.userPhone);
						console.log(result);
						if(result.RetBool==true){
							uni.showToast({
								title: "验证码已发送",
								icon: "none"
							});
						}else{
							uni.showToast({
								title: "验证码发送失败-"+ result.RetMsg,
								icon: "none"
							});
						}
					}else{
						uni.showToast({
							title: "请输入正确的手机号",
							icon: "none"
						});
					}
				}
			},
		}
	}
</script>
<style lang="scss">
	.register {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    &-bg{
      left: 0;
      top: 0;
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    &-inner{
      position: absolute;
      padding: 0 80rpx;
      padding-top: 238rpx;
      box-sizing: border-box;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

		&-logo {
      width: 426rpx;
      height: 112rpx;
      margin: 0 auto;
      display: block;
      margin-bottom: 100rpx;
    }

    .cu-btn{
      height: 80rpx;
      &.block{
        width: 100%;
      }
      &.cancel{
        background-color: #184e88;
        border-color: #184e88;
      }
    }


		.input-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: white;
			width: 100%;
			margin-top: 40rpx;
			position: relative;

			input {
				height: 80rpx;
				border: 1px solid white;
				font-size: 30rpx;
        flex: 1;
        color: #ffffff;
        border-radius: 40rpx;
        text-align: center;
			}
		}
	}
</style>
